<template>
  <div style="width: 1200px;margin: auto">
    <div class="details" style="height:300px;">
      <el-image :src="albumDetail.imgurl" class="image" loading="lazy">
      </el-image>
      <div class="det-right">
        <div class="album_name">
          <h1 class="album_name_txt">{{albumDetail.name}}</h1>
        </div>
        <div class="album_singer">
          <i class="el-icon-user" style="margin-right: 10px"></i>
          <span>{{ albumDetail.singer}} </span>
        </div>
        <div class="album_info">
          <span>语种: {{ albumDetail.language }} </span>
          <span>发行时间: {{ albumDetail.date }} </span>
        </div>
        <div class="album_info">
          <span> 唱片公司: {{ albumDetail.recordcompany }} </span>
          <span>类型: {{ albumDetail.type}} </span>
        </div>
        <div class="album_button">
          <el-button @click="playAll" class="play_all" type="warning">
            <i class="el-icon-caret-right">播放全部</i>
          </el-button>
        </div>
      </div>
    </div>
    <music-list :song-list="songList"></music-list>
  </div>
</template>

<script>
import MusicList from "@/components/MusicList";
import {getAlbumDetail, getSongByAlbum} from "@/plugins/api";
export default {
  name: "Detail",
  components:{MusicList},
  data(){
    return{
      albumDetail:{
        // name:"杜康",
        // singer:'GAI周延',
        // imgurl:"https://y.qq.com/music/photo_new/T002R300x300M000001y2s2E3Tb63d.jpg?max_age=2592000",
        // date:"2022-05-06",
        // language:"国语",
        // recordcompany:"种梦音乐",
        // type:"录音室专辑",
      },
      songList:[],
        // {
        //   name:"烻",
        //   singer:'GAI周延',
        //   imgUrl:"https://y.qq.com/music/photo_new/T002R300x300M00000151T621ThPul_1.jpg?max_age=2592000",
        //   date:"2021-02-05",
        //   language:"国语",
        //   recordCompany:"能量悦动",
        //   type:"录音室专辑",
        // },
        // {
        //   name:"光宗耀祖",
        //   singer:'GAI周延',
        //   imgUrl:"https://y.qq.com/music/photo_new/T002R300x300M000003MS8RP1GyP9f_1.jpg?max_age=2592000",
        //   date:"2018-10-10",
        //   language:"国语",
        //   recordCompany:"种梦音乐",
        //   type:"录音室专辑",
        // },
    }
  },
  methods:{
    playAll(){

    },
    getAlbumDetail(aid){
      let _this = this
      getAlbumDetail(aid).then(function (msg) {
        _this.albumDetail = msg.data.albumDetail
        document.title= _this.albumDetail.name + document.title
      })
      var urlSearchParams = new URLSearchParams();
      urlSearchParams.set("aid", aid)
      getSongByAlbum(urlSearchParams).then(function (msg) {
          _this.songList = msg.data.songList
      })

    }

  },
  created() {

  },
  mounted() {
    this.getAlbumDetail(this.$route.query.aid)
  }
}
</script>

<style scoped>
.details .image{
  width: 250px;
  float: left;
}
.det-right{
  margin-left: 100px;
  float: left;
}
.details .album_name{
  overflow: hidden;
  height: 50px;
  line-height: 50px;
  margin-top: 15px;
}
.album_name_txt{
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 32px;
  font-weight: 400;
}
.album_singer{
  height: 24px;
  margin-bottom: 15px;
}
.album_singer span{
  font-size: 16px;
}
.album_info span{
  width:250px;
  text-align: left;
  display: inline-block;
  text-overflow: ellipsis;
  font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
  height: 27px;
}
.album_button{
  margin-top:30px;
}
.album_button .play_all{
  color: #FFF;
  background-color:rgb(245,132,84);
  border-color: rgb(245, 132, 84);
}

.album_button .play_all:focus,.album_button .play_all:hover{
  background: rgb(249, 165, 142);
  border-color: rgb(249, 165, 142);
  color: #FFF;
}

</style>